<template>
  <!--饼状图-->
  <div id="main" style="width: 400px; height: 350px"></div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      charts: "",
      opinion: ["已打卡", "未打卡"],
      type: "pie",
      opinionData: opinionData,
    };
  },
  props: {
    opinionData: Array,
  },
  mounted() {
    this.$nextTick(function () {
      this.drawPie("main");
    });
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "学生打卡统计",
          left: "center",
          textStyle: {
            color: "#000",
          },
        },
        color: ["#2b821d", "#C1232B"] /*饼状图的颜色*/,
        tooltip: {
          trigger: "item",
          formatter: '{a} <br/>{b} : {c} ({d}%)' /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          left: "center" /*标签文字排成一行*/,
          y: "bottom" /*在垂直方向上的底部*/,
          data: this.opinion,
        },
        series: [
          {
            type: "pie", //饼状图
            center: ["50%", "40%"], //显示位置
            name: "",
            type: "pie",
            radius: ["0%", "50%"] /*空心圆的占比*/,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                borderWidth: 0 /*隔开的白色边界*/,
                borderColor: "#fff" /*border*/,
                // labelLine :{show:true}
              },
            },

            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 200,
                  fontSize: 20, //文字的字体大小
                },
                formatter: "{d}%" /*饼状图内显示百分比*/,
                // data:['40%','60%'],
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.opinionData,
          },
        ],
      });
    },
  },
};
</script>
